<template>
  <div>
    <div class="handle-box" style="margin: 20px 0;display: flex">
      <el-input v-model="supplierName" placeholder="供应商名称" style="width: 200px;margin: 0 20px"></el-input>
      <el-input v-model="natureOfBusiness" placeholder="经营范围" style="width: 200px;margin-right: 20px"></el-input>
      <el-button type="primary" v-on:click="info()"><el-icon class="el-icon--left"><Search /></el-icon>查询</el-button>
      <el-button type="primary" @click="dialogVisibleAdd=true"><el-icon class="el-icon--left"><CirclePlusFilled /></el-icon>添加供应商</el-button>
      <el-upload class="avatar-uploader"
                 ref="uploadRef"
                 action="/api/supplier/importExcel"
                 name="file"
                 :on-success="handleSuccess"
                 style="width: 150px;margin-top: 5px;margin-left: 30px"
      >
        导入供应商Excel
      </el-upload>
    </div>

    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
      <el-table-column prop="personInCharge" label="负责人"></el-table-column>
      <el-table-column prop="natureOfBusiness" label="经营范围"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" v-on:click="selectOne(scope.row.id)">
            <el-icon class="el-icon--left"><Search /></el-icon>
            查看
          </el-button>
          <el-button type="primary" v-on:click="goUpdate(scope.row.id)">
            <el-icon class="el-icon--left"><Edit /></el-icon>
            修改信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加供应商-->
    <el-dialog v-model="dialogVisibleAdd" title="添加供应商" width="30%">
      <el-form :model="addForm" ref="addForm">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="addForm.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="personInCharge">
          <el-input v-model="addForm.personInCharge"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="phoneNumber">
          <el-input v-model="addForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址" prop="supplierAddress">
          <el-input v-model="addForm.supplierAddress"></el-input>
        </el-form-item>
        <el-form-item label="经营范围" prop="natureOfBusiness">
          <el-input v-model="addForm.natureOfBusiness"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="add()">添加</el-button>
        </span>
      </template>
    </el-dialog>

    <!--查看-->
    <el-dialog v-model="dialogVisibleDetails" title="供应商信息详情" width="30%">
      <div>
        <p style="margin: 30px 0"><span style="margin-right: 30px">供应商名称</span>{{
            this.supplierDetails.supplierName
          }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">负责人</span>{{
            this.supplierDetails.personInCharge
          }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">负责人电话</span>{{
            this.supplierDetails.phoneNumber
          }}</p>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">供应商地址</span>{{ this.supplierDetails.supplierAddress }}</p>
        <p style="margin: 30px 0"><span
            style="margin-right: 30px">经营范围</span>{{ this.supplierDetails.natureOfBusiness }}</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleDetails=false">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!--修改信息-->
    <el-dialog v-model="dialogVisibleUpdate" title="修改供应商信息" width="30%">
      <el-form :model="updateForm" ref="updateForm">
        <el-form-item label="供应商名称" prop="supplierName">
          <p>{{ updateForm.supplierName }}</p>
        </el-form-item>
        <el-form-item label="负责人" prop="personInCharge">
          <el-input v-model="updateForm.personInCharge"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="phoneNumber">
          <el-input v-model="updateForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址" prop="supplierAddress">
          <p>{{ updateForm.supplierAddress }}</p>
        </el-form-item>
        <el-form-item label="经营范围" prop="natureOfBusiness">
          <p>{{ updateForm.natureOfBusiness }}</p>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="update()">修改</el-button>
        </span>
      </template>
    </el-dialog>

    <!--分页-->
    <el-pagination style="width:400px;margin: 30px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                   :total="total" background @current-change="info"></el-pagination>

  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "supplier",
  created() {
    this.info()
  },
  data() {
    return {
      tableData: [],
      pageSize: 5,
      curPage: 1,
      total: 0,
      supplierName: '',
      natureOfBusiness: '',
      dialogVisibleAdd: false,
      addForm: {},
      dialogVisibleDetails: false,
      supplierDetails: {},
      dialogVisibleUpdate: false,
      updateForm: {},
      excel: '',
    }
  },
  methods: {
    info() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
        data: {"supplierName": this.supplierName, "natureOfBusiness": this.natureOfBusiness}
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/supplier/info', param, config).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    add() {
      axios.post('/api/supplier/add', this.addForm).then(response => {
        if ('添加成功' == response.data) {
          ElMessage.success('添加成功');
          this.$refs["addForm"].resetFields();
          this.dialogVisibleAdd = false;
          this.info()
        } else {
          ElMessage.error('添加失败');
        }
      })
    },
    selectOne(id) {
      this.dialogVisibleDetails = true;
      let param = new URLSearchParams();
      param.append("id", id)
      axios.post('/api/supplier/one', param).then(response => {
        this.supplierDetails = response.data
      })
    },
    goUpdate(id) {
      this.dialogVisibleUpdate = true;
      let param = new URLSearchParams();
      param.append("id", id)
      axios.post('/api/supplier/one', param).then(response => {
        this.updateForm = response.data
      })
    },
    update() {
      axios.post('/api/supplier/update', this.updateForm).then(response => {
        if ("修改成功" == response.data) {
          ElMessage.success('修改成功');
          this.$refs["updateForm"].resetFields();
          this.dialogVisibleUpdate = false;
          this.info()
        } else {
          ElMessage.error('修改失败');
        }
      })
    },
    handleSuccess() {
      this.info()
    },
  }
}
</script>

<style scoped>

</style>